<template>
  <div class="login">
    <el-card class="card">
      <el-form :model="loginForm" border>
        <el-form-item>
          <el-input v-model="loginForm.username" suffix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="password" v-model="loginForm.password" suffix-icon="el-icon-key"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input :maxlength="4" style="width:65%" v-model="loginForm.code"></el-input>
          <img class="validate-img" :src="src" alt="">
          <span class="tips">看不清？</span>
          <span class="change" @click="changeImg">换一张</span>
        </el-form-item>
        <el-form-item>
          <el-button style="width:100%" type="primary" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
      <p v-if="tips" class="wran-msg"><i class="el-icon-question"></i>
          {{tips}}</p>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      src: 'http://purchase.zhroot.com/Login/GetAuthCode?time='+Math.random(),
      tips: ''
    }
  },
  methods: {
    changeImg() {
      this.src = this.src.split('?')[0]+`?time=${Math.random()}`
    },
    async login() {
      this.tips = ''
      if(!this.loginForm.username) {
        this.tips = '请输入用户名/手机号/邮箱'
        return;
      }else if(!this.loginForm.password) {
        this.tips = '请输入登录密码'
        return;
      }else {
        const res = await axios.post('http://purchase.zhroot.com/WebApiInterface/ApiLogin/CheckLogin', this.loginForm)
        if(res.status >= 200 && res.status < 300 || res.status == 304){
          if(res.data.StatusCode == 200){
            alert('登录成功')
          }else {
            this.tips = res.data.Info
          }
        }
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.login {
  height: 100vh;
  background: linear-gradient(to bottom right, #1ABC9C 0%, #53e3a6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  width: 400px;
  padding: 30px 30px 0 30px;
  border-radius: 5px;
  box-sizing: border-box;
  background: #ebeff0!important;
}
.login .el-input__inner {
  border: none;
}
.tips {
  font-size: 12px;
  padding-left: 14px;
  color: #444;
  font-weight: 300;
}
.change {
  font-size: 12px;
  font-weight: 300;
  color: rgb(0, 0, 238);
  cursor: pointer;
}
.validate-img {
  position: absolute;
  left: calc(65% - 90px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
}
.wran-msg {
  text-align: center;
  font-size: 14px;
  font-weight: 300;
  color: red;
}
</style>
